<template>
  <tc-flex class="segmented-container">
    <router-link tag="div" :to="item.url" v-for="(item, index) in list" :key="index" replace>
      <div class="segmented" :class="{left:index===0, right: index === (list.length-1)}" >
        <span>{{ item.name }}</span>
      </div>
    </router-link>
  </tc-flex>
</template>

<script lang="ts">
  import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

  @Component
  export default class TcSegmentedControl extends Vue{
    @Prop()
    list: any[]
  }
</script>

<style lang="less" scoped>
@import (reference) "~@/less/resources.less";
.theme(@background-color, @active-color, @border-value){
  .segmented{
    height: @tc-segmented-height;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 @separation;
    font-size: @tc-segmented-font-size;
    flex: 1;
    color: @active-color;
    border-left: @border-value;
    border-top: @border-value;
    border-bottom: @border-value;
  }

  .router-link-active .segmented{
    background-color: @active-color;
    color: @background-color;
    background-clip: padding-box;
  }

  .left{
    border-top-left-radius: @border-radius;
    border-bottom-left-radius: @border-radius;
    border-top-right-radius: none;
    border-bottom-right-radius: none;
  }

  .right{
    border-right: @border-value;
    border-top-left-radius: none;
    border-bottom-left-radius: none;
    border-top-right-radius: @border-radius;
    border-bottom-right-radius: @border-radius;
  }
}
.theme-default{
  .theme(@default-tc-segmented-background-color, @default-tc-segmented-active-color, @tc-segmented-border-value)
}
.theme-dark{
  .theme(@dark-tc-segmented-background-color, @dark-tc-segmented-active-color, @tc-segmented-border-value)
}
</style>

